<template>
  <div class="feedback">
    <navBar :title="title"></navBar>
    <div class="feedback_content">
      <van-field
        type="textarea"
        class="feedback_input"
        v-model="value"
        placeholder="请在此处输入您售后的原因…"
      />
      <div class="add_img">
        <div class="add_img_title">添加图片（必填）</div>
        <div class="add_img_upload">
          <div class="fileList" v-for="(item, index) in fileList" :key="index">
            <img class="van_icon" :src="item" />
            <van-icon class="van_icon_delete" name="delete" size="24px" />
          </div>
          <van-uploader accept="image" :after-read="uploadImg" :before-read="beforeRead">
            <img @click="onClickUploadImg" class="van_icon" src="/img/51.png" />
          </van-uploader>
        </div>
      </div>
      <div class="add_img">
        <div class="add_img_title">姓名（选填）</div>
        <van-field class="name_input" v-model="name" placeholder="请在此处输入您的名字" />
      </div>
      <div class="add_img">
        <div class="add_img_title">联系方式（选填）</div>
        <van-field class="name_input" v-model="link" placeholder="请在此处输入您的名字" />
      </div>
      <div class="submit_btn">立即提交</div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import { Field, CellGroup, Icon, Uploader, Toast } from "vant";
Vue.use(Field)
  .use(CellGroup)
  .use(Icon)
  .use(Uploader)
  .use(Toast);
export default {
  name: "afterService",
  data() {
    return {
      title: "售后服务",
      value: "",
      fileList: [],
      name: "",
      link: ""
    };
  },
  components: {
    navBar
  },
  methods: {
    onClickUploadImg() {
      console.log(111);
    },
    uploadImg(file) {
      // 大于1.5MB的jpeg和png图片都缩小像素上传
      if (/\/(?:jpeg|png)/i.test(file.file.type) && file.file.size > 2000000) {
        // 创建Canvas对象(画布)
        let canvas = document.createElement("canvas");
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext("2d");
        // 创建新的图片对象
        let img = new Image();
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = file.content;
        // 监听浏览器加载图片完成，然后进行进行绘制
        img.onload = () => {
          // 指定canvas画布大小，该大小为最后生成图片的大小
          canvas.width = 800;
          canvas.height = 600;
          /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
                        如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
          context.drawImage(img, 0, 0, 800, 600);
          // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
          file.content = canvas.toDataURL(file.file.type, 0.92);
          // 最后将base64编码的图片保存到数组中，留待上传。
          // this.onRead(file);
          this.fileList.length < 3 && this.fileList.push(file.content);
        };
      } else {
        // this.onRead(file);
        this.fileList.length < 3 && this.fileList.push(file.content);
      }
    },
    beforeRead(file) {
      if (file.type !== "image/jpeg") {
        Toast("请上传 jpg 格式图片");
        return false;
      }

      return true;
    }
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped >
.feedback {
  padding-top: 50px;
  box-sizing: border-box;
  background-color: #f7f7f7;
  .feedback_content {
    width: 350px;
    margin: 0 auto;
    margin-top: 11px;
    .feedback_input {
      height: 147px;
      border-radius: 5px;
      background-color: #fff;
    }
    .add_img {
      .add_img_title {
        line-height: 37px;
        font-size: 11px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
      .add_img_upload {
        display: flex;
        align-items: center;
        padding-left: 12px;
        height: 105px;
        background: rgba(255, 255, 255, 1);
        border-radius: 5px;
        .van_icon {
          width: 65px;
          height: 65px;
          margin-right: 10px;
        }
        .fileList {
          position: relative;
          float: left;
          .van_icon_delete {
            position: absolute;
            bottom: 8px;
            right: 8px;
          }
        }
      }
      .name_input {
        width: 350px;
        height: 57px;
        background: rgba(255, 255, 255, 1);
        border-radius: 5px;
        display: flex;
        align-items: center;
      }
    }
    .submit_btn {
      margin: 54px auto 0px;
      width: 333px;
      height: 41px;
      line-height: 41px;
      text-align: center;
      background: linear-gradient(
        90deg,
        rgba(1, 47, 64, 1) 0%,
        rgba(1, 47, 64, 1) 100%
      );
      font-size: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
